import { Button, List, DatePicker, NavBar, Popup, Toast } from 'antd-mobile'
import classNames from 'classnames'

import styles from './index.module.scss'
import { useHistory } from 'react-router-dom'
// import { useDispatch, useSelector } from 'react-redux'
// import { useEffect } from 'react'
import {
  getUserProfile,
  updataPhoto,
  updateUserProfile,
} from '@/store/actions/profile'
// import { RootState } from '@/types/store'
import EditInput from './EditInput'
import { useInitialState } from '@/utils/hooks'
import { useRef, useState } from 'react'
import { useDispatch } from 'react-redux'
import EditList from './EditList'
const Item = List.Item

const ProfileEdit = () => {
  const history = useHistory()
  // const dispatch = useDispatch()
  // useEffect(() => {
  //   dispatch(getUserProfile())
  // }, [dispatch])
  // const { profile } = useSelector((state: RootState) => state.Profile)
  const { profile } = useInitialState(getUserProfile, 'Profile')
  const dispatch = useDispatch()
  type InputState = {
    type: '' | 'name' | 'intro'
    visible: boolean
  }
  const [showInput, setShowInput] = useState<InputState>({
    type: '',
    visible: false,
  })
  type ListState = {
    type: '' | 'gender' | 'photo'
    visible: boolean
  }
  const fileRef = useRef<HTMLInputElement>(null)
  const [showList, setshowList] = useState<ListState>({
    type: '',
    visible: false,
  })
  const hideInput = () => {
    setShowInput({
      type: '',
      visible: false,
    })
  }
  const onUpdata = async (key: string, value: string) => {
    if (key === 'photo') {
      fileRef.current?.click()
      return
    }
    await dispatch(
      updateUserProfile({
        [key]: value,
      })
    )
    Toast.show({
      content: '修改成功',
      icon: 'success',
    })
    hideInput()
    hideList()
  }
  const hideList = () => {
    setshowList({
      type: '',
      visible: false,
    })
  }
  const onChangePhoto = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files) {
      const file = e.target.files[0]
      const fd = new FormData()
      fd.append('photo', file)
      dispatch(updataPhoto(fd))
      hideList()
      Toast.show({
        icon: 'success',
        content: '修改成功',
      })
    }
  }
  return (
    <div className={styles.root}>
      <div className="content">
        {/* 标题 */}
        <NavBar
          style={{
            '--border-bottom': '1px solid #F0F0F0',
          }}
          onBack={() => history.go(-1)}
        >
          个人信息
        </NavBar>

        <div className="wrapper">
          {/* 列表 */}
          <List className="profile-list">
            {/* 列表项 */}
            <Item
              extra={
                <span className="avatar-wrapper">
                  <img width={24} height={24} src={profile.photo} alt="" />
                </span>
              }
              arrow
              onClick={() =>
                setshowList({
                  type: 'photo',
                  visible: true,
                })
              }
            >
              头像
            </Item>
            <Item
              arrow
              extra={profile.name}
              onClick={() =>
                setShowInput({
                  type: 'name',
                  visible: true,
                })
              }
            >
              昵称
            </Item>
            <Item
              arrow
              extra={
                <span className={classNames('intro', 'normal')}>
                  {profile.intro}
                </span>
              }
              onClick={() =>
                setShowInput({
                  type: 'intro',
                  visible: true,
                })
              }
            >
              简介
            </Item>
          </List>

          <List className="profile-list">
            <Item
              arrow
              extra={profile.gender === 1 ? '女' : '男'}
              onClick={() =>
                setshowList({
                  type: 'gender',
                  visible: true,
                })
              }
            >
              性别
            </Item>
            <Item arrow extra={profile.birthday}>
              生日
            </Item>
          </List>

          <DatePicker
            visible={false}
            value={new Date()}
            title="选择年月日"
            min={new Date(1900, 0, 1, 0, 0, 0)}
            max={new Date()}
          />
        </div>

        <div className="logout">
          <Button className="btn">退出登录</Button>
        </div>
      </div>
      <Popup
        visible={showInput.visible}
        position="right"
        bodyStyle={{ width: '100vw' }}
        destroyOnClose
      >
        <EditInput
          hideInput={hideInput}
          type={showInput.type}
          onUpdata={onUpdata}
        ></EditInput>
      </Popup>
      <Popup
        visible={showList.visible}
        position="bottom"
        bodyStyle={{ height: '40vw' }}
        onMaskClick={hideList}
      >
        <EditList
          hideList={hideList}
          type={showList.type}
          onUpdata={onUpdata}
        ></EditList>
      </Popup>
      <input type="file" hidden ref={fileRef} onChange={onChangePhoto}></input>
    </div>
  )
}

export default ProfileEdit
